import { useState, useEffect } from 'react'
import { SearchOutlined, } from '@ant-design/icons';
import { Modal, Input } from 'antd';
import { get_search } from '@/api/article'
// 搜索
const { Search } = Input;
const Searcht = () => {
    const [list, setList] = useState([])
    useEffect(() => {
        get_search().then((res) => {
            setList(res.data.data);
        })
    }, [])

    const onSearch = (value) => {
        get_search(value).then((res) => {
            setList(res.data.data);
        })
    }
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div>
            <SearchOutlined onClick={showModal}></SearchOutlined>
            <Modal width={"95%"} height={200} visible={isModalVisible} onCancel={handleCancel} footer={false}>
                <p>文章搜索</p>
                <Search
                    placeholder="input search text"
                    onSearch={onSearch}
                    style={{
                        width: "96%",
                    }}
                />
                <div>
                    {
                        list && list.map((item) => {
                            return <h2 key={item.id}>{item.title}</h2>
                        })
                    }
                </div>
            </Modal>

        </div>
    )
}

export default Searcht